<!-- 低值消耗 -->
<template>
  <div class="consume">
    <div class="consume_content_left">
      <lineBarChart ref="consumeBarChart" id="consumeBarChart" height="40%"></lineBarChart>
      <div class="consume_content_left_table_box">
        <div v-for="(name, index) in rankingClass" :key="index" class="table_box_item">
          <div class="name">{{ typeArr[index].text }}</div>
          <tableBox class="table_content" :data="rankingList[index]" :show-serial-number="false" :showThead="true"
            :thead-list="rankingThead" />
        </div>
      </div>
    </div>
    <div class="consume_content_right">
      <div class="consume_content_right_pieChart_box">
        <pieChart id="consumePieChart1" ref="consumePieChart1" height="50%" width="25%"></pieChart>
        <pieChart id="consumePieChart2" ref="consumePieChart2" height="50%" width="25%"></pieChart>
        <pieChart id="consumePieChart3" ref="consumePieChart3" height="50%" width="25%"></pieChart>
        <pieChart id="consumePieChart4" ref="consumePieChart4" height="50%" width="25%"></pieChart>
        <pieChart id="consumePieChart5" ref="consumePieChart5" height="50%" width="25%"></pieChart>
        <pieChart id="consumePieChart6" ref="consumePieChart6" height="50%" width="25%"></pieChart>
        <pieChart id="consumePieChart7" ref="consumePieChart7" height="50%" width="25%"></pieChart>
        <pieChart id="consumePieChart8" ref="consumePieChart8" height="50%" width="25%"></pieChart>
      </div>
      <tableBox :data="consumeTableData" :show-serial-number="false" :showThead="false" />
    </div>

  </div>
</template>
<script>
import tableBox from "../components/tableBox.vue"
import pieChart from "../components/pieChart.vue"
import lineBarChart from "../components/lineBarChart.vue"
import { getProjectRegionMaterialsTypeConsumeImg, getMaterialsTypeConsumeRateByProjectRegion, getMaterialsConsumeTopTable, getProjectMaterialsTypeConsumeTable } from "@/api/bi/assetsAndMaterials";

export default {
  components: { lineBarChart, tableBox, pieChart },
  data() {
    return {
      load: null,
      rankingClass: ['清洁工具', '机械配件', '清洁药剂', '客用品', '垃圾处置', '承载收纳', '化学品', '其他'],
      rankingThead: ['', '名称', '数量'],
      rankingList: [[], [], [], [], [], [], [], []],
      consumeTableData: [],
      typeArr: [
        { text: '清洁工具', id: 21 },
        { text: '清洁药剂', id: 22 },
        { text: '垃圾处置', id: 23 },
        { text: '承载收纳', id: 25 },
        { text: '机械配件', id: 36 },
        { text: '客用品', id: 28 },
        { text: '劳保用品', id: 27 },
        { text: '其他', id: 37 },
      ],
    }
  },
  mounted() {
    this.load = this.$loading({
      lock: true,
      text: '加载中...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    this.getConsumeBarChartData()
    this.getTopData()
    this.getPieChartData()
    this.getConsumeTableData()
  },
  methods: {
    // 消耗柱状图数据
    async getConsumeBarChartData() {
      const { data: res } = await getProjectRegionMaterialsTypeConsumeImg();

      let xAxisData = res.dataVal[0]
      let legendData = { show: true, data: ['清洁工具', '清洁药剂', '垃圾处置', '承载收纳', '机械配件', '客用品', '劳保用品', '其他'] }
      let seriesData = []
      // let arr = [100, 100, 100, 100]

      let title = {
        text: '当月区域物资品类消耗数量柱状图',
        left: 'center'
      }
      legendData.data.forEach((item, index) => {

        seriesData.push(
          {
            name: legendData.data[index],
            type: 'bar',
            data: res.dataVal[index + 1],
            barGap: '0%'
          },
        )
      })
      this.$refs.consumeBarChart.initChart(legendData, xAxisData, seriesData, title)
    },
    //排行榜数据
    async getTopData() {
      let style = "font-size:12px"
      let type = this.typeArr
      let styleT = "background: #EEEFF3;border-right:1px solid #fff;border-top:1px solid #fff;font-size:12px"

      const { data: res1 } = await getMaterialsConsumeTopTable({ commodityTypeId: type[0].id })
      const { data: res2 } = await getMaterialsConsumeTopTable({ commodityTypeId: type[1].id })
      const { data: res3 } = await getMaterialsConsumeTopTable({ commodityTypeId: type[2].id })
      const { data: res4 } = await getMaterialsConsumeTopTable({ commodityTypeId: type[3].id })
      const { data: res5 } = await getMaterialsConsumeTopTable({ commodityTypeId: type[4].id })
      const { data: res6 } = await getMaterialsConsumeTopTable({ commodityTypeId: type[5].id })
      const { data: res7 } = await getMaterialsConsumeTopTable({ commodityTypeId: type[6].id })
      const { data: res8 } = await getMaterialsConsumeTopTable({ commodityTypeId: type[7].id })
      let arr1 = []
      res1.forEach((item, index) => {
        arr1.push([{ val: index + 1, style }, { val: item.commodityTypeName, style }, { val: item.commodityNumber, style }])
      })
      if (res1.length == 0) {
        arr1.push([{ val: '暂无数据', colspan: 3 }])
      }

      let arr2 = []
      res2.forEach((item, index) => {
        arr2.push([{ val: index + 1, style }, { val: item.commodityTypeName, style }, { val: item.commodityNumber, style }])
      })
      if (res2.length == 0) {
        arr2.push([{ val: '暂无数据', colspan: 3 }])
      }

      let arr3 = []
      res3.forEach((item, index) => {
        arr3.push([{ val: index + 1, style }, { val: item.commodityTypeName, style }, { val: item.commodityNumber, style }])
      })
      if (res3.length == 0) {
        arr3.push([{ val: '暂无数据', colspan: 3 }])
      }

      let arr4 = []
      res4.forEach((item, index) => {
        arr4.push([{ val: index + 1, style }, { val: item.commodityTypeName, style }, { val: item.commodityNumber, style }])
      })
      if (res4.length == 0) {
        arr4.push([{ val: '暂无数据', colspan: 3 }])
      }
      let arr5 = []
      res5.forEach((item, index) => {
        arr5.push([{ val: index + 1, style }, { val: item.commodityTypeName, style }, { val: item.commodityNumber, style }])
      })
      if (res5.length == 0) {
        arr5.push([{ val: '暂无数据', colspan: 3 }])
      }

      let arr6 = []
      res6.forEach((item, index) => {
        arr6.push([{ val: index + 1, style }, { val: item.commodityTypeName, style }, { val: item.commodityNumber, style }])
      })
      if (res6.length == 0) {
        arr6.push([{ val: '暂无数据', colspan: 3 }])
      }

      let arr7 = []
      res7.forEach((item, index) => {
        arr7.push([{ val: index + 1, style }, { val: item.commodityTypeName, style }, { val: item.commodityNumber, style }])
      })
      if (res7.length == 0) {
        arr7.push([{ val: '暂无数据', colspan: 3 }])
      }

      let arr8 = []
      res8.forEach((item, index) => {
        arr8.push([{ val: index + 1, style }, { val: item.commodityTypeName, style }, { val: item.commodityNumber, style }])
      })
      if (res8.length == 0) {
        arr8.push([{ val: '暂无数据', colspan: 3 }])
      }


      this.rankingList = [arr1, arr2, arr3, arr4, arr5, arr6, arr7, arr8]
    },
    // 获取品类占比
    async getPieChartData() {
      let type = this.typeArr
      const { data: res1 } = await getMaterialsTypeConsumeRateByProjectRegion({ commodityTypeId: type[0].id })
      const { data: res2 } = await getMaterialsTypeConsumeRateByProjectRegion({ commodityTypeId: type[1].id })
      const { data: res3 } = await getMaterialsTypeConsumeRateByProjectRegion({ commodityTypeId: type[2].id })
      const { data: res4 } = await getMaterialsTypeConsumeRateByProjectRegion({ commodityTypeId: type[3].id })
      const { data: res5 } = await getMaterialsTypeConsumeRateByProjectRegion({ commodityTypeId: type[4].id })
      const { data: res6 } = await getMaterialsTypeConsumeRateByProjectRegion({ commodityTypeId: type[5].id })
      const { data: res7 } = await getMaterialsTypeConsumeRateByProjectRegion({ commodityTypeId: type[6].id })
      const { data: res8 } = await getMaterialsTypeConsumeRateByProjectRegion({ commodityTypeId: type[7].id })
      let chartData1 = []
      res1.forEach(item => {
        chartData1.push({ value: item.commodityTypeRate, name: item.projectRegion })
      })
      let chartData2 = []
      res2.forEach(item => {
        chartData2.push({ value: item.commodityTypeRate, name: item.projectRegion })
      })
      let chartData3 = []
      res3.forEach(item => {
        chartData3.push({ value: item.commodityTypeRate, name: item.projectRegion })
      })
      let chartData4 = []
      res4.forEach(item => {
        chartData4.push({ value: item.commodityTypeRate, name: item.projectRegion })
      })
      let chartData5 = []
      res5.forEach(item => {
        chartData5.push({ value: item.commodityTypeRate, name: item.projectRegion })
      })
      let chartData6 = []
      res6.forEach(item => {
        chartData6.push({ value: item.commodityTypeRate, name: item.projectRegion })
      })
      let chartData7 = []
      res7.forEach(item => {
        chartData7.push({ value: item.commodityTypeRate, name: item.projectRegion })
      })
      let chartData8 = []
      res8.forEach(item => {
        chartData8.push({ value: item.commodityTypeRate, name: item.projectRegion })
      })

      let legend = {
        orient: 'vertical',
        right: 0,
        top: 'center',
        bottom: 20,
      }
      let titleArr = []
      type.forEach(item => {
        titleArr.push({
          text: item.text,
          left: 'center',
          top: '45%'
        })
      })

      let radius = ['40%', '70%']
      let label = { show: false }
      let itemStyle = {
        borderRadius: 8,
        borderColor: '#fff',
        borderWidth: 2
      }

      this.$refs.consumePieChart1.initChart(chartData1, legend, titleArr[0], radius, label, itemStyle)
      this.$refs.consumePieChart2.initChart(chartData2, legend, titleArr[1], radius, label, itemStyle)
      this.$refs.consumePieChart3.initChart(chartData3, legend, titleArr[2], radius, label, itemStyle)
      this.$refs.consumePieChart4.initChart(chartData4, legend, titleArr[3], radius, label, itemStyle)
      this.$refs.consumePieChart5.initChart(chartData5, legend, titleArr[4], radius, label, itemStyle)
      this.$refs.consumePieChart6.initChart(chartData6, legend, titleArr[5], radius, label, itemStyle)
      this.$refs.consumePieChart7.initChart(chartData7, legend, titleArr[6], radius, label, itemStyle)
      this.$refs.consumePieChart8.initChart(chartData8, legend, titleArr[7], radius, label, itemStyle)

      this.load.close()
    },
    // 获取表格数据
    async getConsumeTableData() {
      const { data: res } = await getProjectMaterialsTypeConsumeTable()


      let style = "background: #EEEFF3;border-right:1px solid #fff"
      let styleT = "background: #EEEFF3;border-right:1px solid #fff;border-top:1px solid #fff"

      let head = [
        [{ val: '项目区域', rowspan: 2, style }, { val: '项目名称', rowspan: 2, style }, { val: '清洁工具', colspan: 2, style }, { val: '机械配件', colspan: 2, style }, { val: '客用品', colspan: 2, style }, { val: '清洁药剂', colspan: 2, style }, { val: '垃圾处置', colspan: 2, style }, { val: '劳保用品', colspan: 2, style }, { val: '承载收纳', colspan: 2, style }],
        [{ val: ' 消耗数量', style: styleT }, { val: ' 消耗金额', style: styleT }, { val: ' 消耗数量', style: styleT }, { val: ' 消耗金额', style: styleT }, { val: ' 消耗数量', style: styleT }, { val: ' 消耗金额', style: styleT }, { val: ' 消耗数量', style: styleT }, { val: ' 消耗金额', style: styleT }, { val: ' 消耗数量', style: styleT }, { val: ' 消耗金额', style: styleT }, { val: ' 消耗数量', style: styleT }, { val: ' 消耗金额', style: styleT }, { val: ' 消耗数量', style: styleT }, { val: ' 消耗金额', style: styleT },]
      ]
      let arr = []
      res.forEach(item => {
        arr.push([{ val: item.projectRegion },
        { val: item.projectName },
        { val: item.qjgjNumber }, { val: item.qjgjMoney },
        { val: item.jxpjNumber }, { val: item.jxpjMoney },
        { val: item.keypNumber }, { val: item.keypMoney },
        { val: item.qjyjNumber }, { val: item.qjyjMoney },
        { val: item.ljczNumber }, { val: item.ljczMoney },
        { val: item.lbypNumber }, { val: item.lbypMoney },
        { val: item.czsnNumber }, { val: item.czsnMoney }])
      })
      // let d = [{ val: '庐山路片区' }, { val: '华晨·早安华晨' }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }, { val: 1 }]

      this.consumeTableData = [
        ...head, ...arr
        // d, d, d, d, d, d
      ]
    }


  }

}
</script>
<style lang="scss" scoped>
.consume {
  background: #F2F4FC;
  height: 100%;
  width: 100%;
  display: flex;
  overflow: hidden;

  .consume_content_left {
    background-color: rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 6px;
    padding: 22px;
    box-sizing: border-box;
    width: 35%;

    .consume_content_left_table_box {
      flex-grow: 1;
      display: flex;
      flex-wrap: wrap;
      margin: 10px -10px -10px;
      height: 60%;


      .table_box_item {
        box-sizing: border-box;
        width: 25%;
        height: 50%;
        padding: 10px 10px 0 10px;
        overflow: hidden;
        // border: 1px solid red;
        display: flex;
        flex-direction: column;

        .name {
          margin-bottom: 6px;
        }

        .table_content {
          // flex-grow: 1;
          width: 100%;

        }
      }
    }

  }

  .consume_content_right {
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    padding: 22px;
    width: 50%;
    margin-left: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;

    .consume_content_right_pieChart_box {
      height: 40%;
      display: flex;
      flex-wrap: wrap;
      flex-shrink: 0;
    }

  }


}
</style>